<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Page | Almaaref Atijania</title>
<link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>


<script type="text/javascript">

function theRotator() {
    //Set the opacity of all images to 0
    $('div.rotator ul li').css({opacity: 0.0});
    
    //Get the first image and display it (gets set to full opacity)
    $('div.rotator ul li:first').css({opacity: 1.0});
        
    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
    
    setInterval('rotate()',6000);
    
}

function rotate() { 
    //Get the first image
    var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator ul li:first');

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
    
    //Un-comment the 3 lines below to get the images in random order
    
    //var sibs = current.siblings();
    //var rndNum = Math.floor(Math.random() * sibs.length );
    //var next = $( sibs[ rndNum ] );
            

    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
    
};



$(document).ready(function() {      
    //Load the slideshow
    theRotator();
    $('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
});

</script>

<style type='text/css'>
html,body{height:1500px;width:100%; margin:0;padding:0; background:white;}
    

    div.rotator {
    position:relative;


    height:190px;    display: none;
    width:205px;
    float:left;
    background:white;
    border-radius:11px;

}
/* rotator css */
    div.rotator ul{padding:0; margin:0;padding:3px 3px;}
    div.rotator ul li {
    
    position:absolute;
    list-style: none;

}
/* rotator image style */   
    div.rotator ul li img {
    border-radius:11px;

}
    div.rotator ul li.show {
    z-index:500;
}





div#maincontainer{ height:1200px; min-width:1300px; 
margin:0 auto;
background:black;
font-family:"freight-sans-pro","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;
        }
div#container{

height:900px;width:1300px; 
padding:10px 10px;
margin:0 auto;

}
		
		
#content{

-webkit-border-radius:11px;
border-radius: 11px;

height:780px; max-width:800px; background:white;    
margin:0 auto;

 }
		
		
#banner{height:320px; width:100%; margin:0 auto;
	}
	
	
#ok{height:286px; width:1330px;  
background:url(images/banner.png) no-repeat;
	margin:0 auto;
      
      
        
        
        
        	} 

		div#menu {  }
div#copyright {
    font:11px 'Trebuchet MS';
    color:#fff;
    text-indent:30px;
    padding:40px 0 0 0;
}
div#copyright a { color:#00bfff; }
div#copyright a:hover { color:#fff; }


		</style>
</head>

<body>

<div id="banner"><div id="ok"></div><div id="nav"><div id="okok">
        <ul>
        <li id="first"><a href="#">Accueil</a></li>
        <li><a href="#">Généralités</a></li>
        <li><a href="#">Sa petite famille</a></li>
        <li><a href="#">La voie tijania</a></li>
        <li><a href="#">Liste des oeuvres de l'érudit</a></li>
        <li><a href="#">Résumé de ses publications</a></li>
        <li><a href="#">Livres de l'érudit traduits</a></li>
        <li class="parent"><a href="#">Généalogique</a> <ul> <li><a href="#"> Tidjani</a></li>    <li><a href="#">SKIREDJ</a></li> </ul></li>
        <ul> <li><a href="#">Galerie Photos</a></li>  <li><a href="#">Calendrier Hégire/chrétien</a></li> </ul>
        </ul></div></div></div>
<div id="maincontainer">




<div id="container" style="padding:20px 20px;">
<div class="rotator" >
  <ul>

    <li class="show"><a href="#link1"><img src="images/1.png" width="200" height="183"  alt="pic1" /></a></li>
    <li><a href="#link2"><img src="images/2.png" width="200" height="183"  alt="pic2" /></a></li>
    <li><a href="#link2"><img src="images/3.png" width="200" height="183"  alt="pic2" /></a></li>
      <li><a href="#link2"><img src="images/4.png" width="200" height="183"  alt="pic2" /></a></li>
        <li><a href="#link2"><img src="images/5.png" width="200" height="183"  alt="pic2" /></a></li>
  </ul>
    
</div>

<div  id="content" >
Welcome to Almaarefa Tijania

</div>
</div>

</div>
<div id="copyright" style="display:none;">Copyright &copy; 2012 <a href="http://apycom.com/">Apycom jQuery Menus</a></div>
</body>
</html>
